<template>
  <div class="box1">
    <div class="box111">
      <div class="sty">
        <span>首页</span>
      </div>
      <!-- 四个框 -->
      <div class="shouye41">
        <div class="span1"><span>注册人数</span></div>
        <div class="span2"><span>
          <countTo :startVal='0' :endVal='this.personnelcount' :duration='2000'></countTo>
          </span></div>
        <!-- <div class="span5">
          <img src="..\..\image\bb1.png" alt="" />
        </div>
        <div class="span3">
          <img src="..\..\image\u448.png" alt="" />
          <span>3.48%</span>
        </div> -->
        <div class="span4"><span>自上个月以来</span></div>
      </div>
      <div class="shouye42">
        <div class="span1"><span>已发布风采</span></div>
        <div class="span2"><span><countTo :startVal='0' :endVal='5' :duration='4000'></countTo></span></div>
        <!-- <div class="span5">
          <img src="..\..\image\bb2.png" alt="" />
        </div>
        <div class="span3">
          <img src="..\..\image\u448.png" alt="" />
          <span>6.28%</span>
        </div> -->
        <div class="span4"><span>自上个月以来</span></div>
      </div>
      <div class="shouye43">
        <div class="span1"><span>已组织志愿服务</span></div>
        <div class="span2"><span><countTo :startVal='0' :endVal='4' :duration='4000'></countTo></span></div>
        <!-- <div class="span5">
          <img src="..\..\image\bb3.png" alt="" />
        </div>
        <div class="span3">
          <img src="..\..\image\u448.png" alt="" />
          <span>5.08%</span>
        </div> -->
        <div class="span4"><span>自上个月以来</span></div>
      </div>
      <div class="shouye44">
        <div class="span1"><span>已发布专题活动</span></div>
        <div class="span2"><span><countTo :startVal='0' :endVal='this.thematicactivitiescount' :duration='4000'></countTo></span></div>
        <!-- <div class="span5">
          <img src="..\..\image\bb4.png" alt="" />
        </div>
        <div class="span3">
          <img src="..\..\image\u448.png" alt="" />
          <span>5.08%</span>
        </div> -->
        <div class="span4"><span>自上个月以来</span></div>
      </div>
      <div class="">
        <!-- 统计每周的近期兑换量 -->
        <div id="box1" class="exchars1" v-show="box1">
          <div>
            <el-row>
              <el-button class="zhou" @click="StateWeek()">周</el-button>
              <el-button class="ri" @click="StateDay()">日</el-button>
            </el-row>
          </div>
          <div id="statisty" style="width: 700px; height: 420px"></div>
        </div>
        <!-- 统计每日的近期兑换量 -->
        <div id="box2" class="exchars1" v-show="box2">
          <div>
            <el-row>
              <el-button class="zhou" @click="StateWeek()">周</el-button>
              <el-button class="ri" @click="StateDay()">日</el-button>
            </el-row>
          </div>
          <div id="statisty2" style="width: 700px; height: 420px"></div>
        </div>

        <!-- 支付情况饼图 -->
        <div class="echarts2">
          <div
            id="bing"
            style="width: 350px; height: 400px; margin-top: 20px"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import countTo from 'vue-count-to';
let user = localStorage.getItem("user")
  ? JSON.parse(localStorage.getItem("user"))
  : null;
export default {
  components: { countTo },
  data() {
    return {
      personnelcount:0,
      thematicactivitiescount:0,
      box1: true,
      box2: true,
    };
  },
  mounted() {
    this.getChart();
    this.getChart2();
    this.getChart3();
  },
  created(){
      this.load();
       this.load1();
  },
  methods: {
    getChart() {
      this.box2 = false;
       const myChart = echarts.init(document.getElementById("statisty"));
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 232, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    },
    getChart2() {
       const myChart = echarts.init(document.getElementById("statisty2"));
      myChart.setOption({
        xAxis: {
          type: "category",
          data: [
            "2022-8-8",
            "2022-8-9",
            "2022-8-10",
            "2022-8-11",
            "2022-8-12",
            "2022-8-13",
            "2022-8-14",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 532, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    },
    getChart3() {
       const myChart = echarts.init(document.getElementById("bing"));
      myChart.setOption({
        title: {
          text: "统计",
          subtext: "乡贤注册情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "40%",
            data: [
              { value: 55, name: "已注册" + 55 + "%" },
              { value: 45, name: "新注册" + 45 + "%" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
        load() {
      this.$axios
        .get("/villagepersonnel/personnel-info/villagepersonnelcount"
        )
        .then((res) => {
          this.personnelcount = res.data.data.villagepersonnelcount;
        })
        .catch((err) => {
          console.error(err);
        });
    },
            load1() {
      this.$axios
        .get("/villagepersonnel/thematic-activities/thematicactivitiescount"
        )
        .then((res) => {
          this.thematicactivitiescount = res.data.data.thematicactivitiescount;
        })
        .catch((err) => {
          console.error(err);
        });
    },

  },
};
</script>

<style scoped="less">
.box1 {
  position: relative;
  height: 880px;
  background-color: rgba(247, 248, 253, 1);
}
.box111 {
  position: absolute;
  width: 100%;
  height: 280px;
  background-color: rgba(181, 191, 209);
}
.sty {
  position: absolute;
  left: 326px;
  top: 50px;
  color: aliceblue;
}
.shouye41 {
  position: absolute;
  left: 320px;
  top: 100px;
  width: 241px;
  height: 118px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
}
.shouye42 {
  position: absolute;
  left: 595px;
  top: 100px;
  width: 241px;
  height: 118px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
}
.shouye43 {
  position: absolute;
  left: 870px;
  top: 100px;
  width: 241px;
  height: 118px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
}
.shouye44 {
  position: absolute;
  left: 1150px;
  top: 100px;
  width: 241px;
  height: 118px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
}

.exchars1 {
  position: absolute;
  top: 315px;
  left: 320px;
  background-color: rgba(23, 43, 77, 1);
  height: 421px;
  width: 703px;
  border-radius: 15px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
}
.echarts2 {
  position: absolute;
  left: 1045px;
  top:315px;
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  border-radius: 15px;
}
.zhou {
  float: right;
  margin: 5px 40px 0 20px;
  border-radius: 6px;
}
.ri {
  float: right;
  margin: 5px 0px 0 20px;
  border-radius: 6px;
}
.span1{
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 14px;
  color: #8898AA;
  font-family: 'Microsoft YaHei UI';
    font-weight: 400;
}
.span2{
  position: absolute;
  top: 40px;
  left: 24px;
  font-size: 25px;
  color: #32325D;
  font-family: 'Microsoft YaHei UI';
    font-weight: 400;
}
.span3{
  position: absolute;
  top: 84px;
  left: 20px;
  font-size: 15px;
  font-family: 'Microsoft YaHei UI';
  font-weight: 400;
  color: #44CE9C;
}
.span4{
  position: absolute;
  top: 84px;
  left: 114px;
  font-size: 14px;
  color: #8898AA;
  font-family: 'Microsoft YaHei UI';
    font-weight: 400;
}
.span5{
  position: absolute;
  top: 21px;
  left: 175px; 
}

</style>